<template>
  <header class="base-layout-header">
    <div class="window-logo">
      <el-image class="logo" src="/favicon.ico"/>
    </div>
    <div class="window-search">
      <el-button class="search-icon" icon="Odometer"/>
      <el-input class="search-input" placeholder="搜索"/>
      <el-button class="search-icon" icon="Plus"/>
    </div>
    <div class="window-button">
      <el-button class="item" icon="Setting"/>
      <el-button class="item" icon="Opportunity"/>
      <el-button class="item" icon="BottomLeft"/>
      <el-button class="item" icon="CopyDocument"/>
      <el-button class="item" icon="Close" v-on:click="handleWindowButtonClose"/>
    </div>
  </header>
</template>

<script>
// import {ipcRenderer} from "electron";
import {ElMessageBox} from "element-plus";

export default {
  methods: {
    handleWindowButtonClose() {
      ElMessageBox.confirm("确认关闭吗？", "温馨提示：", {confirmButtonText: '没毛病', cancelButtonText: '那哪行', type: 'warning',}).then(() => {
        // ipcRenderer.send("window-close");
      })
    }
  }
}
</script>

<style scoped>
.base-layout-header {
  -webkit-app-region: drag;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  color: #E5EAF3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: static;
  z-index: 0;
}

.base-layout-header .window-logo {
  flex: 1;
}

.base-layout-header .window-logo .logo {
  width: 30px;
  vertical-align: middle;
}

.base-layout-header .window-logo .name {
  margin-left: 10px;
}

.base-layout-header .window-search {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.base-layout-header .window-search .search-icon, .base-layout-header .window-search .search-input {
  -webkit-app-region: no-drag;
}

.base-layout-header .window-search .search-input {
  margin: 0 10px;
}

.base-layout-header .window-button {
  flex: 1;
  text-align: right;
}

.base-layout-header .window-button .item {
  -webkit-app-region: no-drag;
}
</style>